<template>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="nav">
                <div class="title"></div>
                <div class="tree">
                    <treeAdmin></treeAdmin>
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="wrapper">
                <div class="myTitle" v-if="this.$route.params.type=='add'">员工添加</div>
                <div class="myTitle" v-if="this.$route.params.type=='look'">员工查看</div>
                <div class="myTitle" v-if="this.$route.params.type=='update'">员工修改</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!-- <el-form-item label="所属分类" prop="category">
                        <span>{{ ruleForm.category }}</span>
                    </el-form-item> -->
                    <el-form-item label="员工名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <template>
                            <el-radio v-model="ruleForm.gender" label="0">女</el-radio>
                            <el-radio v-model="ruleForm.gender" label="1">男</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idNumber">
                        <el-input v-model="ruleForm.idNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closePage" v-if="this.$route.params.type=='look'">返回</el-button>
                        <div v-else>
                            <el-button  type="primary" @click="submitForm('ruleForm')" :plain="true">保存</el-button>
                            <el-button  @click="resetForm('ruleForm')">重置</el-button>
                            <el-button  @click="closePage">取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import treeAdmin from './treeAdmin.vue'
// import UploadImg from './upLoadImg.vue'
import axios from 'axios' 
export default {
    components:{
        treeAdmin
    },
    data() {
        return {
            seeInfo:'',
            updateInfo:'',
            ruleForm: {
                category: '',
                username:'',
                name:'',
                phone:'',
                isShow: true,
            },
            rules: {
                username: [
                    { required: true, message: '请输入员工名', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'change' }
                ],
                category: [
                    { required: true, message: '请选择员工分类', trigger: 'change' }
                ],
                idNumber: [
                    { required: true, message: '请填写身份证号', trigger: 'change' }
                ],
            }
        };
    },
    created(){
        if(this.$route.params.type=='update'||this.$route.params.type=='look'){
            axios({
                url:`http://localhost:8080/kfc/admin/employee/get?id=${this.$route.params.id}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.ruleForm=res.data.data
                this.ruleForm.category=''
                this.ruleForm.isShow=true
            })
        }
        this.$bus.on('sendTreeData',(val)=>{
            console.log(val.label);
            this.ruleForm.category=val.label
        })
        this.$bus.on('sendHtml',(val)=>{
            let str=val.split("<p>")
            str=str[1]
            str=str.split("</p>")
            str=str[0]
            this.ruleForm.descs=str
        })
        // if(this.$route.params.goodInfo){
        //     this.seeInfo=this.$route.params.goodInfo
        //     this.ruleForm.username=this.seeInfo.username
        //     this.ruleForm.password=this.seeInfo.password
        //     this.ruleForm.name=this.seeInfo.name
        //     this.ruleForm.phone=this.seeInfo.phone
        //     this.ruleForm.gender=this.seeInfo.gender
        // }
        // if(this.$route.params.updateInfo){
        //     this.updateInfo=this.$route.params.updateInfo
        //     this.ruleForm.username=this.updateInfo.username
        //     this.ruleForm.password=this.updateInfo.password
        //     this.ruleForm.name=this.updateInfo.name
        //     this.ruleForm.phone=this.updateInfo.phone
        //     this.ruleForm.gender=this.updateInfo.gender
        // }
    },
    methods:{
        closePage(){
            this.$router.push('/admin/list')
        },
        submitForm(forName){
            this.$refs[forName].validate((valid)=>{
                if(valid){
                    if(this.$route.params.type=='update'){
                        axios({
                            url:'http://localhost:8080/kfc/admin/employee/update',
                            method:'put',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                id:this.ruleForm.id,
                                idNumber:this.ruleForm.idNumber,
                                name:this.ruleForm.name,
                                phone:this.ruleForm.phone,
                                gender:this.ruleForm.gender,
                                username:this.ruleForm.username
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                    }
                    else{
                        axios({
                            url:'http://localhost:8080/kfc/admin/employee',
                            method:'post',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                idNumber:this.ruleForm.idNumber,
                                name:this.ruleForm.name,
                                phone:this.ruleForm.phone,
                                gender:this.ruleForm.gender,
                                username:this.ruleForm.username
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        })
                    }
                    // else{
                    //     axios({
                    //         url:'http://localhost:8080/polycystic/admin/add',
                    //         method:'post',
                    //         headers:{
                    //             token:localStorage.getItem('jwt')
                    //         },
                    //         data:{
                    //             username:this.ruleForm.username,
                    //             password:this.ruleForm.password,
                    //             name:this.ruleForm.name,
                    //             phone:this.ruleForm.phone
                    //         }
                    //     })
                    //     this.$message({
                    //         type:'success',
                    //         message:'添加成功'
                    //     })
                    // }
                    setTimeout(()=>{
                        this.$router.push({
                            name:'adminList'
                        })
                    },1000)
                }
                else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        resetForm(forName){
            this.$refs[forName].resetFields()
        },
    }
}
</script>

<style lang="less" scoped>
.nav{
    height: 600px;
    background: #FFF;
    .title {
        background: skyblue;
        padding: 20px;
        color: #fff;
    }
    .tree{
        padding: 20px;
    }
}
.wrapper{
    background: #FFF;
    .myTitle {
        background: #eee;
        padding: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .demo-ruleForm{
        padding: 20px;
    }
}
</style>